<template>
  <div class="user-menu-container" @click="closeDropdown">
    <!-- 顶部导航栏：显示用户信息和下拉菜单 -->
    <header-section
      :username="username"
      :id="id"
      :showDropdown="showDropdown"
      :menuList="filteredMenuList"
      @toggle-dropdown="toggleDropdown"
      @menu-item-click="handleMenuItemClick"
      @setting-click="handleSettingClick">
    </header-section>

    <!-- 主内容区域：显示主要的banner图片，点击可查看患者信息 -->
    <div class="banner-container">
      <image
        @click="showPatientInfo"
        class="banner-image"
        src="../../image/userMenu/banner.png"></image>
    </div>

    <!-- 弹窗组件区域：根据用户操作显示不同的功能弹窗 -->
    <!-- 修改密码弹窗 -->
    <ChangePassword
      v-if="showChangePassword"
      @close="handleCloseChangePassword"
      @success="handlePasswordChangeSuccess">
    </ChangePassword>

    <!-- 账号管理弹窗 -->
    <AccountManagement
      v-if="showAccountManagement"
      @close="handleCloseAccountManagement">
    </AccountManagement>

    <!-- 资料中心弹窗 -->
    <DataCenterDialog v-if="showDataCenter" @close="handleCloseDataCenter">
    </DataCenterDialog>

    <!-- 退出确认弹窗 -->
    <exit-confirmation
      v-if="showExitConfirm"
      @cancel="handleCancelExit"
      @confirm="handleConfirmExit">
    </exit-confirmation>

    <!-- 患者信息弹窗 -->
    <PatientInformation
      v-if="showPatientInformation"
      :visible="showPatientInformation"
      @close="handleClosePatientInfo">
    </PatientInformation>

    <!-- 设置弹框 -->
    <SettingsDialog
      v-if="showSettingsDialog"
      :visible="showSettingsDialog"
      @close="handleCloseSettings">
    </SettingsDialog>
  </div>
</template>

<script>
/**
 * @description 用户菜单页面组件
 * 该组件是用户登录后的主界面，提供账号管理、资料中心、修改密码和退出登录等功能
 * 根据用户角色动态显示不同的菜单选项
 */
import { readJsonFromFile } from '@/utils/fileUtil'
import { mapState, mapMutations } from 'vuex'
import ChangePassword from './components/ChangePassword.vue'
import AccountManagement from './components/AccountManagement.vue'
import DataCenterDialog from './components/DataCenterDialog.vue'
import PatientInformation from './components/PatientInformation.vue'
import HeaderSection from './components/HeaderSection.vue'
import ExitConfirmation from './components/ExitConfirmation.vue'
import SettingsDialog from './components/SettingsDialog.vue'
import { handleConnect } from '@/public/ConnectBLE'
import { writeBLEState } from '@/public/BluetoothFun'
import store from '@/store'

export default {
  /**
   * 注册组件依赖
   */
  components: {
    ChangePassword, // 修改密码弹窗组件
    AccountManagement, // 账号管理弹窗组件
    DataCenterDialog, // 资料中心弹窗组件
    PatientInformation, // 患者信息弹窗组件
    HeaderSection, // 顶部导航栏组件
    ExitConfirmation, // 退出确认弹窗组件
    SettingsDialog, // 设置弹框组件
  },

  /**
   * 组件数据
   * @returns {Object} 组件内部状态数据
   */
  data() {
    return {
      username: '', // 当前登录用户名
      id: '', // 当前登录用户ID
      showDropdown: false, // 控制下拉菜单显示状态
      showChangePassword: false, // 控制修改密码弹窗显示状态
      showAccountManagement: false, // 控制账号管理弹窗显示状态
      showDataCenter: false, // 控制资料中心弹窗显示状态
      showExitConfirm: false, // 控制退出确认弹窗显示状态
      showPatientInformation: false, // 控制患者信息弹窗显示状态
      showSettingsDialog: false, // 控制设置弹框显示状态

      /**
       * 下拉菜单列表配置
       * id: 菜单项唯一标识
       * title: 菜单项显示文本
       * imageUrl: 菜单项图标路径
       * role: 可访问该菜单项的角色，不设置则所有角色可访问
       */
      menuList: [
        {
          id: 1,
          title: '账号管理',
          imageUrl: '../../static/userMenu/accountManagement.png',
          role: 'sysadmin', // 仅系统管理员可见
        },
        {
          id: 2,
          title: '资料中心',
          imageUrl: '../../static/userMenu/DataCenter.png',
        },
        {
          id: 3,
          title: '修改密码',
          imageUrl: '../../static/userMenu/ChangePassword.png',
        },
        {
          id: 4,
          title: '退出登录',
          imageUrl: '../../static/userMenu/logOut.png',
        },
      ],
    }
  },

  /**
   * 计算属性
   */
  computed: {
    /**
     * 从Vuex状态中映射用户信息和连接状态
     */
    ...mapState(['userInfo', 'isConnected']),

    /**
     * 根据用户角色过滤菜单列表
     * @returns {Array} 过滤后的菜单列表
     */
    filteredMenuList() {
      return this.menuList.filter(
        (item) => !item.role || this.username === item.role
      )
    },
  },

  /**
   * 组件方法
   */
  methods: {
    /**
     * 从Vuex中映射修改用户信息的方法
     */
    ...mapMutations(['setUserInfo']),

    /**
     * 获取用户信息
     * 从本地JSON文件读取用户数据，并根据用户名查找对应用户信息
     * 如果找到用户信息，则更新到组件状态和Vuex中
     * 如果未找到用户信息，则重定向到登录页
     */
    getUser() {
      try {
        console.log('尝试获取用户信息，当前用户名:', this.username)
        const users = readJsonFromFile('/sdcard/test/user.json') || []
        console.log('读取到的用户列表:', JSON.stringify(users))

        const user = users.find((u) => u.name === this.username)
        if (user) {
          console.log('找到用户信息:', JSON.stringify(user))
          this.id = user.id
          // 确保Vuex中的用户信息完整
          this.setUserInfo({
            id: user.id,
            name: user.name,
            account: this.username,
          })
        } else {
          console.error('未找到用户信息，用户名:', this.username)
          this.redirectToLogin()
        }
      } catch (error) {
        console.error('获取用户信息失败', error)
        this.redirectToLogin()
      }
    },

    /**
     * 重定向到登录页
     * 当用户信息无效或发生错误时，跳转回登录页面
     */
    redirectToLogin() {
      uni.reLaunch({
        url: '/pages/index/index',
      })
    },

    /**
     * 切换下拉菜单显示状态
     * 点击头像或用户名时触发
     */
    toggleDropdown() {
      this.showDropdown = !this.showDropdown
    },

    /**
     * 处理菜单项点击事件
     * 根据点击的菜单项显示对应的功能弹窗
     * @param {String} option - 点击的菜单项标题
     */
    handleMenuItemClick(option) {
      this.showDropdown = false

      // 使用映射表简化条件判断逻辑
      const actionMap = {
        账号管理: () => (this.showAccountManagement = true),
        资料中心: () => (this.showDataCenter = true),
        修改密码: () => (this.showChangePassword = true),
        退出登录: () => (this.showExitConfirm = true),
      }

      if (actionMap[option]) {
        actionMap[option]()
      }
    },

    /**
     * 点击其他区域关闭下拉菜单
     * 通过检测点击位置是否在头部区域外来判断是否关闭下拉菜单
     * @param {Object} event - 点击事件对象
     */
    closeDropdown(event) {
      const query = uni.createSelectorQuery().in(this)
      query
        .select('.header-section')
        .boundingClientRect((rect) => {
          if (!rect) return

          const pageX = event.touches[0].pageX
          const pageY = event.touches[0].pageY

          // 判断点击位置是否在头部区域外
          const isOutsideHeader = !(
            pageX >= rect.left &&
            pageX <= rect.right &&
            pageY >= rect.top &&
            pageY <= rect.bottom
          )

          if (isOutsideHeader) {
            this.showDropdown = false
          }
        })
        .exec()
    },

    /**
     * 关闭修改密码弹窗
     */
    handleCloseChangePassword() {
      this.showChangePassword = false
    },

    /**
     * 处理密码修改成功事件
     * 显示成功提示并关闭弹窗
     */
    handlePasswordChangeSuccess() {
      uni.showToast({
        title: '密码修改成功',
        icon: 'success',
      })
      this.showChangePassword = false
    },

    /**
     * 关闭账号管理弹窗
     */
    handleCloseAccountManagement() {
      this.showAccountManagement = false
    },

    /**
     * 关闭资料中心弹窗
     */
    handleCloseDataCenter() {
      this.showDataCenter = false
    },

    /**
     * 取消退出操作
     * 关闭退出确认弹窗
     */
    handleCancelExit() {
      this.showExitConfirm = false
    },

    /**
     * 确认退出操作
     * 跳转到登录页面
     */
    handleConfirmExit() {
      uni.reLaunch({
        url: '/pages/index/index',
      })
    },

    /**
     * 显示患者信息弹窗
     * 点击banner图片时触发
     */
    showPatientInfo() {
      this.showPatientInformation = true
    },

    /**
     * 关闭患者信息弹窗
     */
    handleClosePatientInfo() {
      this.showPatientInformation = false
    },

    /**
     * 处理设置按钮点击事件
     * 显示设置弹框，同时开始连接蓝牙
     */
    handleSettingClick() {
      // 显示设置弹框
      this.showSettingsDialog = true

      // 显示连接中提示
      uni.showLoading({
        title: '连接蓝牙设备中...',
      })

      // 尝试连接蓝牙设备
      handleConnect()
        .then(() => {
          console.log('蓝牙连接成功')
          uni.hideLoading()

          // 不再立即显示蓝牙连接成功的提示，而是在关闭自动关机功能后显示
          setTimeout(() => {
            writeBLEState(40) //关闭06和空闲负载检测的自动关机功能

            // 在关闭自动关机功能后显示连接成功提示
            setTimeout(() => {
              uni.showToast({
                title: '蓝牙连接成功',
                icon: 'success',
                duration: 2500,
              })
            }, 500) // 给writeBLEState一些执行时间
          }, 3500)
        })
        .catch((error) => {
          console.error('蓝牙连接失败：', error)
          uni.hideLoading()
          uni.showToast({
            title: '蓝牙连接失败，请重试',
            icon: 'none',
            duration: 2000,
          })
        })
    },

    /**
     * 关闭设置弹框
     * 如果蓝牙已连接，则断开连接
     */
    handleCloseSettings() {
      this.showSettingsDialog = false

      writeBLEState(50)

      // 判断蓝牙是否已连接
      if (this.isConnected && store.state.deviceId) {
        console.log('检测到蓝牙已连接，准备断开连接')
        setTimeout(() => {
          // 关闭蓝牙连接
          uni.closeBLEConnection({
            deviceId: store.state.deviceId,
            success: (res) => {
              console.log('蓝牙连接已断开', res)
              // 更新状态
              store.commit('setIsConnected', false)
              store.commit('setDeviceId', '')

              uni.showToast({
                title: '蓝牙已断开连接',
                icon: 'none',
                duration: 1500,
              })
            },
            fail: (err) => {
              console.error('断开蓝牙连接失败', err)
            },
          })
        }, 2500)
      } else {
        console.log('蓝牙未连接，无需断开')
      }
    },
  },

  /**
   * 生命周期钩子 - 组件挂载完成
   * 组件挂载时获取用户信息，如果没有用户信息则重定向到登录页
   */
  mounted() {
    console.log('userMenu页面加载，检查用户信息')
    // 优先从Vuex中获取用户信息
    const userInfo = this.userInfo
    console.log('Vuex中的用户信息:', JSON.stringify(userInfo))

    if (userInfo && (userInfo.account || userInfo.name)) {
      console.log('使用Vuex中的用户信息')
      this.username = userInfo.account || userInfo.name
      this.getUser()
    } else {
      // 如果Vuex中没有，则从本地存储获取
      this.username = uni.getStorageSync('account')
      console.log('从本地存储获取的用户名:', this.username)

      if (this.username) {
        this.getUser()
      } else {
        console.log('未找到保存的用户名，重定向到登录页')
        this.redirectToLogin()
      }
    }
  },
}
</script>

<style scoped lang="scss">
/**
 * 用户菜单页面样式
 */
.user-menu-container {
  width: 100%;
  height: 100vh;
  background: url('@/image/background.png') no-repeat;
  background-size: 100% 100%;
  position: relative;

  /**
   * Banner容器样式
   * 居中显示在页面中央
   */
  .banner-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

    /**
     * Banner图片样式
     * 添加悬停效果增强交互体验
     */
    .banner-image {
      height: 468px;
      object-fit: contain;
      cursor: pointer;
      transition: transform 0.3s ease;

      &:hover {
        transform: scale(1.02);
      }
    }
  }
}
</style>
